<template>
  <div id="appindex">
    <div class="page-view"><router-view></router-view></div>
    <login-modal />
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import LoginModal from '@/components/LoginModal/modal.vue'
import { getToken } from './utils/auth'

export default defineComponent({
  components: {
    LoginModal,
  },
  computed: {
    ...mapGetters(['loginModalShow', 'isLogin']),
  },
  watch: {
    loginModalShow(val) {
      console.log('val: ', val)
    },
    isLogin(val) {
      if (val) {
        this.getUserInfo()
      }
    },
  },
  async created() {
    // const userInfo = await this.getUserInfo()
    // console.log('userInfo: ', userInfo)
    // console.log(this.$route)
    if (getToken()) {
      this.login()
      this.getUserInfo()
    }
  },
  methods: {
    ...mapMutations(['login']),
    ...mapActions(['getUserInfo']),
  },
})
</script>

<style lang="less">
#appindex {
  min-width: 1180px;
  .viewWrap {
    background-color: #ffffff;
    min-height: calc(100vh - 130px);
    min-width: 1170px;
  }
}
.fade-enter-active {
  transition: opacity 0.3s;
}
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
.el-color-dropdown__btns {
  display: flex;
  align-items: center;
  .el-color-dropdown__value {
    display: flex;
    align-items: center;
  }
}
.el-xiqu-color__btn {
  width: 25px;
  height: 25px;
  background: red;
  float: left;
  margin-right: 5px;
}
</style>
